<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">

</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>



<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="人员展示"><a href="Administrators_worker.html">人员展示</a></li>
        <li role="评分查询"><a href="Administrators_worker_PingFenCX.html">评分查询</a></li>
        <li role="服务查询"><a href="Administrators_worker_FuWuCX.html">服务查询</a></li>
        <li role="服务查询"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">
            <li>搜索</li>
            <span>客服id</span>
            <input type="text"  class="form-control" id="WorkerID" placeholder="请输入客服的代号" aria-describedby="sizing-addon1" >
            <button onclick="searchWorker()" type="button" class="form-control_button">点击查询</button>
        </ul>
    </div>


</div>



<div id="workerDetails" class="user-details"></div>

<div id="workersList"></div>

<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>
    function searchWorker() {
        var WorkerID = document.getElementById("WorkerID").value;
        var xhr = new XMLHttpRequest();
        alert(WorkerID);
        xhr.open("GET", "/searchWorkerPingFen?WorkerID=" + WorkerID , true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var worker = JSON.parse(xhr.responseText);
                displayWorkerDetails(worker);
            } else if (xhr.readyState == 4 && xhr.status == 404) {
                alert("falied");
                document.getElementById("workerDetails").innerHTML = "Worker not found.";
            }
        };
        xhr.send();
    }

    function displayWorkerDetails(worker) {

        var workerDetailsDiv = document.getElementById("workerDetails");
        workerDetailsDiv.innerHTML =
            "客服ID：" + worker.customerServiceID + "<br/>" +"<br/>"+
            "姓名：" + worker.name + "<br/>" +"<br/>"+
            "密码：" + worker.password + "<br/>" +"<br/>"+
            "联系方式：" + worker.contactNumber + "<br/>" +"<br/>"+
            "评分：" + worker.rating + "<br/>" +"<br/>"+
            "薪水：" + worker.salary;
    }




</script>
</body>
</html>